import React , { Component }from  'react';
import {render}  from "react-dom";
import {instance} from "api/index.js" ;

import 'css/common/normalize.css';
import 'css/login.scss';

const app = document.getElementById("login");
const {baseUrl} = window.jsp_config;

class Login extends Component {

	constructor(props){
		super(props);
		this.state={
			loginStatus:false,
		}
	}
	
	login=()=>{
				
			const password = this.pwdInp.value.trim();
			const user_name = this.userInp.value.trim();

			if(!password || !user_name){
				return ;
			}

			this.setState({
					loginStatus:true,
			});	

			instance.post("/login/logVal",{password,user_name}).then(res=>{

				console.log(res);

				this.setState({
					loginStatus:false,
				});
				window.location.href=res.url;	

			}).catch(error=>{
				alert("api error");
				window.location.href="index";
				// window.location.href=baseUrl+"/index";	
			});
	}

	render(){

		const {loginStatus} = this.state;

		const loginBtnStaus = loginStatus && (<i className="submitLoad fa fa-spinner fa-pulse" ></i>) || "" ;


 		return (
			<div className="inp-box">
					<div className="inp-item">
						<label ><i className="fa fa-user "></i></label>
						<input type="text" className="inp" ref={(inp)=>{this.userInp=inp}} />
						<p className="warn" id="user_warn"></p>
					</div>
					<div className="inp-item">
						<label ><i className="fa fa-lock"></i></label>
						<input type="password" className="inp" ref={(inp)=>{this.pwdInp=inp}} />
						<p className="warn" id="pwd_warn"></p>
					</div>
					<div className="inp-item">
						<button className="btnLogin" onClick={this.login}>
							{loginBtnStaus}
							<span className="sr-only">Loading...</span>
							<span>登录</span>
						</button>
					</div>
					<p className="warn" id="state_warn"></p>
			</div>
			)
	}
}

const HeadCom=()=>{

	return (<div className="head">
					<div className="container" >
						<p className="name">长城网科·智慧医疗</p>
					</div>
		    </div>);
};

const ContentCom = ()=>{
	return (
			<div className="content">
				<div className="container login-box">
					<div className="icon"></div>
					<div className="login">
						<div className="login-modal">
							<div className="modal-head">	
								<p className="modal-title">软件产品 LICENSE 管理系统</p>
								<p className="code"> </p>
							</div>
							<Login></Login>
						</div>
					</div>
				</div>
			</div> )
}

const FootCom=()=>{

	return (<div className="footer">
				<div className="container">
					 <p>请使用火狐和谷歌以获得更好的体验&nbsp;<a href="/data/web_static/file/Firefox-latest.exe" download="FireFox.exe">火狐浏览器下载地址</a></p>
			    	 <p className="Copyright">Copyright 2017 深圳市长城网信息科技股份有限公司 版权所有</p>
				</div>
			</div>);
}


const App = ()=>{
	return (
			<div>
				<HeadCom></HeadCom>
				<ContentCom></ContentCom>
				<FootCom></FootCom>
			</div>
		)
}

render(<App/>,app);